<template>
  <div class="home">

    <Carousel loop style="margin: auto; height: 500px; background:linear-gradient(to right,white,black ,white)" autoplay
              :autoplay-speed="3000">
      <CarouselItem>
        <img src="../assets/img/home/home-banner.jpg" alt="" class="carousel-img">
      </CarouselItem>
      <CarouselItem>
        <img src="../assets/img/back2.png" alt="" class="carousel-img">
      </CarouselItem>
      <CarouselItem>
        <img src="../assets/img/back9.jpg" alt="" class="carousel-img">
      </CarouselItem>
      <CarouselItem>
        <img src="../assets/img/back6.jpg" alt="" class="carousel-img">
      </CarouselItem>
      <CarouselItem>
        <img src="../assets/img/back7.jpg" alt="" class="carousel-img">
      </CarouselItem>
      <CarouselItem>
        <img src="../assets/img/back8.jpg" alt="" class="carousel-img">
      </CarouselItem>
    </Carousel>


    <music-search></music-search>

    <div class="middle">为您提供</div>

    <div class="content">
      <div class="width600">
        <div class="mar-left-100 mar-top-50">
          <div class="title-1">版权登记 / 我的音乐</div>
          <div class="text">
            在这里，您可以上传您的原创音乐，<br>
            在这里，您可以进入“我的音乐”管理您的音乐。<br>
            如果您是独立音乐人/商业使用企业/音乐分发商，<br>
            您可以看到您上传的音乐、购买的音乐。<br>
            如果您是音乐分发商，您还可以看到您分发的音乐。
          </div>
          <Card class="button-div">

            <router-link to="/my_music" class="router-link">
              <Icon type="md-arrow-forward" color="#EB7A67"/>
              进入管理
            </router-link>

          </Card>
        </div>
      </div>
      <div class="width600">
        <img src="~assets/img/home/home-con1.jpg" alt="" style="width: 100%">
      </div>
    </div>

    <div class="content">
      <div class="width600">
        <img src="~assets/img/home/home-con2.jpg" alt="" style="width: 100%">
      </div>
      <div class="width600">
        <div class="mar-left-100 mar-top-50">
          <div class="title-1">版权交易</div>
          <div class="text">
            在这里，将为您提供丰富的原创音乐，<br>
            在这里，将为您提供智能的搜索服务，<br>
            在这里，将为您提供精准的音乐推荐。<br>
            您会发现小众却优质的音乐，<br>
            您可以直接与音乐版权方进行在线交易，<br>
            如果您是音乐分发商，您还可以直接与音乐版权方签订分发合约。
          </div>
          <Card class="button-div">
            <router-link to="/transaction" class="router-link">
              <Icon type="md-arrow-forward" color="#EB7A67"/>
              进入市场
            </router-link>
          </Card>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="width600">
        <div class="mar-left-100 mar-top-50">
          <div class="title-1">版权查验</div>
          <div class="text">
            在这里，您无需登录即可查询曲库音乐的版权信息，<br>
            在这里，您可以验证曲库音乐的版权登记凭证，<br>
            在这里，您可以验证曲库音乐的音乐授权凭证，<br>
            期待您的共同监督。
          </div>
          <Card class="button-div">
            <router-link to="/copyright_search" class="router-link">
              <Icon type="md-arrow-forward" color="#EB7A67"/>
              前往查询
            </router-link>
          </Card>
        </div>
      </div>
      <div class="width600">
        <img src="~assets/img/home/home-con3.jpg" alt="" style="width: 100%">
      </div>
    </div>

    <div class="content">
      <div class="width600">
        <img src="~assets/img/home/home-con4.jpeg" alt="" style="width: 100%">
      </div>
      <div class="width600">
        <div class="mar-left-100 mar-top-50">
          <div class="title-1">每日任务</div>
          <div class="text">
            您每一次签到，都会获得MB积分奖励，<br>
            您每一次上传原创音乐，都会获得MC通证奖励，<br>
            ……<br>
            在这里，将持续为您推出有趣的活动，<br>
            完成任务即可获得奖励，<br>
            敬请期待！
          </div>
          <Card class="button-div">
            <router-link to="/market" class="router-link">
              <Icon type="md-arrow-forward" color="#EB7A67"/>
              执行任务
            </router-link>
          </Card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MusicSearch from '../components/MusicSearch'

export default {
  name: 'Home',
  components: { MusicSearch }
}
</script>

<style scoped>
.home {
  margin-bottom: 5px;
}

.middle {
  width: 100%;
  height: 100px;
  line-height: 100px;
  background-color: rgba(209, 208, 170, 1);
  text-align: center;
  color: rgba(255, 255, 255, 1);
  font-size: 28px;
  font-family: '方正兰亭细黑', "Roboto Light", "Microsoft YaHei", serif;
  font-style: italic;
}

.content {
  /*height: 399px;*/
  margin: 0 auto;
  width: 1200px;
  display: flex;
}

.title-1 {
  height: 70px;
  line-height: 70px;
  color: rgba(235, 122, 103, 1);
  font-size: 32px;
  text-align: left;
}

.text {
  width: 441px;
  height: 145px;
  line-height: 26px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 10px;
}

.button-div {
  width: 212px;
  height: 60px;
  /*line-height: 60px;*/
  border: 2px solid rgba(235, 122, 103, 1);
  text-align: center;
}

.router-link {
  color: rgba(235, 122, 103, 1);
  font-size: 18px;
  font-family: Microsoft Yahei, "Roboto Light", serif;
}

.carousel-img {
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
}
</style>
